<template>
    <div class="yb-home">
        <yb-header></yb-header>
        <div class="content">
            <div class="nav">
                <el-menu mode="vertical" default-active="t-home" class="menu" @select="jump">
                    <el-menu-item index="t-home" class="home iconfont icon-shouye_shouye">首页</el-menu-item>
                    <el-menu-item-group title="商户管理" class="list-user ">
                        <el-menu-item index="myFiel">我的加油机</el-menu-item>
                        <el-menu-item index="myInfo">我的信息</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="数据中心" class="list-data">
                        <el-menu-item index="gasData">加油数据</el-menu-item>
                        <el-menu-item index="recordData">充值数据</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="订单管理" class="list-detail">
                        <el-menu-item index="detail">加油详情信息</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="IC卡管理" class="list-ic">
                        <el-menu-item index="icInfo">IC卡信息</el-menu-item>
                        <el-menu-item index="icWate">IC卡流水信息</el-menu-item>
                        <el-menu-item index="batchRecharge">批量充值</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="安全管理" class="list-safe">
                        <el-menu-item index="history">事件记录</el-menu-item>
                        <el-menu-item index="passWord">密码管理</el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </div>
            <div class="info">
                <component :is="currentView"></component>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>

<script>
    import header from '../packages/header.vue'
    import footer from '../packages/footer.vue'
    import tHome from '../packages/home.vue'
    import myFiel from '../packages/myFuel.vue'
    import myInfo from '../packages/myInfo.vue'
    import gasData from '../packages/gasData.vue'
    import recordData from '../packages/recordData.vue'
    import detail from '../packages/detail.vue'
    import icInfo from '../packages/icInfo.vue'
    import icWate from '../packages/icWate.vue'
    import passWord from '../packages/passWord.vue'
    import history from '../packages/history.vue'
    import batchRecharge from '../packages/batchRecharge.vue'
    export default {
        name: 'home',
        computed: {
            userInfo: function () {
                return this.$store.state.userInfo
            }
        },
        components: {
            'yb-header': header,
            'yb-footer': footer,
            't-home': tHome,
            'myFiel': myFiel,
            'myInfo': myInfo,
            'gasData': gasData,
            'recordData': recordData,
            'detail': detail,
            'icInfo': icInfo,
            'icWate': icWate,
            'passWord': passWord,
            'history': history,
            'batchRecharge': batchRecharge
        },
        created: function () {

        },
        data: function () {
            return {
                currentView: 't-home'
            }
        },
        methods: {
            jump: function (index) {
                this.currentView = index
            }
        }
    }

</script>

<style lang="less">
    @import "../less/variables";
    .el-dialog {
        width: 700px !important;
    }

    .el-dialog__header {
        box-sizing: border-box;
        height: 60px;
        background: #f4f5f9;
    }

    .el-dialog__footer {
        box-sizing: border-box;
        height: 60px;
        text-align: center !important;
        background: #f4f5f9 !important;
    }

    .el-button--primary {
        background: #44b549;
        border-color: #44b549;
    }

    .el-button--primary:hover {
        background: #359333;
    }

    .yb-home {
        font-size: 14px;
        .content {
            width: @layout-width;
            margin: 0 auto;
            margin-top: 35px;
            background: white;
            display: flex;
            .nav {
                width: 210px;
                min-height: 680px;
                border-right: 1px solid #e7e7eb;
                .home {
                    padding-left: 70px !important;
                    margin: 20px 0;
                    position: relative;
                    font-size: 14px;
                    cursor: pointer;
                    &::before {
                        position: absolute;
                        width: 20px;
                        height: 15px;
                        background-size: 100% 100%;
                        left: 47px;
                    }
                }
                .menu {
                    background: white;
                    .is-active {
                        background: #44b549;
                        color: white !important;
                    }
                    .el-menu-item-group__title {
                        padding: 0 0 0 70px !important;
                        height: 35px;
                        line-height: 35px;
                        position: relative;
                        &::before {
                            position: absolute;
                            width: 20px;
                            height: 15px;
                            left: 47px;
                            font-family: "iconfont" !important;
                            font-size: 16px;
                            font-style: normal;
                            -webkit-font-smoothing: antialiased;
                        }
                    }
                    .el-menu-item-group {
                        border-top: 1px solid #e7e7eb;
                    }
                    .el-menu-item {
                        padding-left: 70px !important;
                        height: 35px;
                        line-height: 35px;
                    }
                    .list-ic {
                        .el-menu-item-group__title {
                            &::before {
                                content: "\E6B8"
                            }
                        }
                    }
                    .list-data {
                        .el-menu-item-group__title {
                            &::before {
                                content: "\e604"
                            }
                        }
                    }
                    .list-safe {
                        .el-menu-item-group__title {
                            &::before {
                                content: "\e678"
                            }
                        }
                    }
                    .list-user {
                        .el-menu-item-group__title {
                            &::before {
                                content: "\e63a"
                            }
                        }
                    }
                    .list-detail {
                        .el-menu-item-group__title {
                            &::before {
                                content: "\e613"
                            }
                        }
                    }
                }
            }
            .info {
                flex: 1;
                padding: 30px 20px;
            }
        }
    }

</style>
